<template>
	<view class="main">
		<!-- title -->
		<view>
			<view class="ziti">
				<text>您的身份是？</text>
			</view>

			<view class="infoStyle">
				<view :class="[current === 0 ? 'active' : 'select']" @click="choseItem(0)">
					<text class="gray-align">{{ this.infoList[0].name }}</text>
				</view>
				<view :class="[current === 1 ? 'active' : 'select']" @click="choseItem(1)">
					<text class="gray-align">{{ this.infoList[1].name }}</text>
				</view>
			</view>
			<view class="infoStyle">
				<view :class="[current === 2 ? 'active' : 'select']" @click="choseItem(2)">
					<text class="gray-align">{{ this.infoList[2].name }}</text>
				</view>
				<view :class="[current === 3 ? 'active' : 'select']" @click="choseItem(3)">
					<text class="gray-align">{{ this.infoList[3].name }}</text>
				</view>
			</view>

			<view class="ziti">
				<text>发布的货源类型</text>
			</view>
			<view class="infoStyle">
				<view v-for="(item, index) in sourceType" :key="index">
					<view :class="[typeIndex === index ? 'active' : 'select']" @click="choseType(index)">
						<text class="gray-align">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<button class="next-btn" @click="nextForm()">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoList: [{
						value: '1',
						name: '我是产地'
					},
					{
						value: '3',
						name: '我是产地'
					},
					{
						value: '2',
						name: '我是批发商'
					},
					{
						value: '0',
						name: '其他'
					}
				],
				current: 0, //单选 初始化第一个高亮
				sourceType: [{
						value: 1,
						name: '预售'
					},
					{
						value: 0,
						name: '现货'
					}
				],
				typeIndex: 0,
				data: {
					info: '',
					infoIndex: 0,
					source: '',
					sourceIndex: 0
				}
			}
		},
		onShow() {
			if(getApp().globalData.userInfo.id){
				 
			}else{
				uni.navigateTo({
					url: '/pages/loginOnlyPhone/loginOnlyPhone'
				})
			}
		},
		methods: {
			// 单选选择对应的身份
			choseItem: function(index) {
				console.log(this.infoList[index].name + this.infoList[index].value)
				this.current = index;
			},
			choseType: function(index) {
				console.log(this.sourceType[index].value)
				this.typeIndex = index;
			},
			//下一步跳转
			nextForm() {
				var sendData = this.data
				sendData.info = this.infoList[this.current].name
				sendData.infoIndex = this.current
				sendData.source = this.sourceType[this.typeIndex].name
				sendData.sourceIndex = this.typeIndex
				console.log(JSON.stringify(sendData))
				//进行跳转到另外一个界面
				uni.navigateTo({
					url: '/pages/issue-source/issue-source-form?info=' + sendData.info + '&infoIndex=' + sendData.infoIndex + '&source=' + sendData.source + '&sourceIndex=' + sendData.sourceIndex
				})

			}
		}
	}
</script>
<style>
	.main {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.ziti {
		font-size: 24upx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 0px;
		color: rgba(178, 178, 178, 1);
		text-align: left;
		margin: 30rpx 0 0 30rpx;
	}

	.infoStyle {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.active {
		width: 165px;
		height: 44px;
		border-radius: 16rpx;
		background-color: #92c3ff;
		border-width: 2rpx;
		border-style: solid;
		border-color: #fff0e9;
		color: #364061;
		font-size: 46rpx;
		margin: 30rpx 10rpx 0 10rpx;
		text-align: center;

	}

	.select {
		width: 165px;
		height: 44px;
		border-radius: 16rpx;
		border-width: 2rpx;
		border-style: solid;
		border-color: #f3f7fa;
		color: #364061;
		background-color: #f0f3f7;
		font-size: 46rpx;
		margin: 30rpx 10rpx 0 10rpx;
		text-align: center;
	}

	.gray-align {
		font-size: 25rpx;
		margin-top: 30rpx;
	}

	.next-btn {
		margin-top: 40rpx;
		width: 343px;
		height: 46px;
		opacity: 0.6;
		border-radius: 8px;
		background: rgba(67, 207, 124, 1);

		font-size: 18px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}
</style>
